<template>
  <v-form ref="form" class="form px-7 pt-6 pb-14">
    <v-row class="line" no-gutters>
      <v-col class="label" :cols="4"> Year-Month-Date </v-col>
      <v-col :cols="8" class="text-left">
        <v-card flat width="37.5%">
          <PickerInput
            v-model="date"
            v-validate="{ required: true }"
            name="Year-Month-Date"
          ></PickerInput>
        </v-card>
        <span class="vee-validate-error">
          {{ errors.first("Year-Month-Date") }}
        </span>
      </v-col>
    </v-row>
    <v-row class="line" no-gutters>
      <v-col class="label" :cols="4"> Holiday Description </v-col>
      <v-col :cols="8" class="text-left">
        <v-text-field
          v-model="description"
          v-validate="{ required: true }"
          name="Holiday Description"
          solo
          hide-details
          dense
          class="white-input"
        >
        </v-text-field>
        <span class="vee-validate-error">
          {{ errors.first("Holiday Description") }}
        </span>
      </v-col>
    </v-row>
  </v-form>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import VForm from "vuetify/src/components/VForm/index";
import PickerInput from "@/components/Maintenance/PickerInput/PickerInput.vue";
import { Pick } from "@/common/constants/Utils";
@Component({
  components: {
    PickerInput,
  },
})
export default class AddEditHoliday extends Vue {
  id: string | null = "";
  date: string | null = "";
  description: string | null = "";
  resetForm() {
    this.id = null;
    type VFormInstance = InstanceType<typeof VForm>;
    const formRef = this.$refs.form as VFormInstance;
    formRef.reset();
  }

  setFormData(formData: object) {
    Object.assign(this, formData);
  }

  getFormData() {
    return Pick(this, ["id", "date", "description"]);
  }

  async validateFormData() {
    const valid = await this.$validator.validate();
    if (valid) {
      return this.getFormData();
    } else {
      return false;
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/Maintenance/Dialog/DialogForm.scss";
</style>
